import React from 'react'
import AMapExample from './AMapExample'
import { Sticky, NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import SearchNearby from './SearchNearby'





const ShowMap: React.FC = () => {

  const navigate = useNavigate();


  return (
    <>
      {/* 吸顶 */}
      <Sticky offsetTop={15}>
        <NavBar onClickLeft={() => { navigate(-1) }}></NavBar>
        {/* 搜索框 */}
        <div>
          <div>
            {/* 默认显示当前的位置地区，下拉进行更改当前位置 */}
            <select>
              <option value="1">当前地区</option>
              <option value="2">其他地区</option>
            </select>
            {/* 搜索框 */}
            <input type="text" placeholder="请选择住址附近或熟悉的地点" />
          </div>
          {/* 搜索按钮 */}
          <button>搜索</button>
        </div>

      </Sticky>
      {/* 地图 */}
      <AMapExample></AMapExample>
      {/* 附近吃喝玩乐 */}
      <SearchNearby></SearchNearby>


      {/* 显示当前位置附近的吃喝玩乐，并且使用div列表进行实现 */}
      <div  >
        <div>
          <h3>当前选定的位置</h3>
        </div>
        <div>
          <h3>附近吃喝玩乐店铺信息</h3>
        </div>
      </div>

    </>
  )
}

export default ShowMap